<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/index.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        canvas{
            margin: 50px auto 0;
            display: block;
            background: yellow;
        }
        p {
            font-size: 20px;
            text-decoration: underline;
            text-decoration-color: rgba(64, 235, 255, 0.3);
            text-underline-offset: 10px;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
</body>
<script>
    let ctx = document.getElementById('canvas');
    // 获取webgl上下文
    let gl = ctx.getContext('webgl')
    // 顶点着色器
    let VERTEX_SHADER_SOURCE = `
        attribute vec4 aPosition;
        attribute vec4 aColor;
        varying vec4 vColor;

        uniform mat4 mat;
        void main(){
            gl_Position = mat * aPosition;
            vColor = aColor;
        }
    `;
    // 片元着色器
    const FRAGMENT_SHADER_SOURCE = `
        precision lowp float;
        varying vec4 vColor;

        void main(){
            gl_FragColor = vColor;
        }
    `;
    let program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)
    // 获取 attribute变量，必须在initShader之后
    let aPosition = gl.getAttribLocation(program, 'aPosition')
    let aColor = gl.getAttribLocation(program, 'aColor')
    // 获取 uniform 变量 mat
    let mat = gl.getUniformLocation(program, 'mat')


    // 创建一组顶点数据   Float32Array类型化数组，用这个数组，既可以知道里面是数据类型
    const vertices = new Float32Array([
        // 0123
        1, 1, 1,
        -1, 1, 1,
        -1,-1, 1,
        1,-1, 1,
        // 0345
        1, 1, 1,
        1,-1, 1,
        1,-1,-1,
        1, 1,-1,
        // 0156
        1, 1, 1,
        1, 1, -1,
        -1, 1,-1,
        -1, 1,1,
        // 1267
        -1, 1, 1,
        -1,1, -1,
        -1, -1,-1,
        -1,-1,1,
        // 2347
        -1,-1, 1,
        1,-1, 1,
        1,-1,-1,
        -1,-1,-1,
        // 4567
        1,-1,-1,
        1, 1,-1,
        -1, 1,-1,
        -1,-1,-1,
    ])

    /*
       1, 1, 1,   0
      -1, 1, 1,   1
      -1,-1, 1,   2
       1,-1, 1,   3
       1,-1,-1,   4
       1, 1,-1,   5
      -1, 1,-1,   6
      -1,-1,-1,   7
    * */

    // 创建缓冲区
    let buffer = gl.createBuffer();
    // 将缓冲区对象 绑定到 webgl上
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    // 将顶点数据 写入 缓冲区对象
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
    // 给顶点赋值 指定给aPosition attribute变量
    gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0 )
    // 激活attribute变量  gl.disableVertexAttribArray(aPosition); 使⽤此⽅法禁⽤
    gl.enableVertexAttribArray(aPosition);

    let colors = new Float32Array([
        0.4,0.4,1.0,0.4,0.4,1.0,0.4,0.4,1.0,0.4,0.4,1.0,
        0.4,1.0,0.4,0.4,1.0,0.4,0.4,1.0,0.4,0.4,1.0,0.4,
        1.0,0.4,0.4,1.0,0.4,0.4,1.0,0.4,0.4,1.0,0.4,0.4,
        1.0,1.0,0.4,1.0,1.0,0.4,1.0,1.0,0.4,1.0,1.0,0.4,
        1.0,0.0,1.0,1.0,0.0,1.0,1.0,0.0,1.0,1.0,0.0,1.0,
        0.0,1.0,1.0,0.0,1.0,1.0,0.0,1.0,1.0,0.0,1.0,1.0,
    ])
    let colorBuffer = gl.createBuffer()
    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer)
    gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
    gl.vertexAttribPointer(aColor, 3, gl.FLOAT, false, 0, 0 )
    gl.enableVertexAttribArray(aColor);

    // 创建索引数据
    let indexData = new Uint8Array([
        0,1,2,0,2,3,
        4,5,6,4,6,7,
        8,9,10,8,10,11,
        12,13,14,12,14,15,
        16,17,18,16,18,19,
        20,21,22,20,22,23,
    ])
    // 创建索引的缓冲区对象
    let indexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indexData, gl.STATIC_DRAW);


    // 视点坐标
    let eyex = 3;
    let eyey = 3;
    let eyez = 4;

    let deg = 0;
    function draw(){
        deg += 0.01;
        let rotate = getRotateMatrix(deg);
        // 获取外面的视图矩阵
        let vm = getViewMatrix(eyex,eyey,eyez, 0.0,0.0,0.0, 0.0,0.6,0.0);
        // 正射投影矩阵
        let perspective = getPerspective(30,ctx.width/ctx.height,100,1);
        // 开启深度缓冲区，不然后面的会挡住前面的
        gl.enable(gl.DEPTH_TEST);
        // 我们这里使用的是mat4的uniform变量 要给它赋值需要新的api
        // 三个参数 旧的 false 新的
        gl.uniformMatrix4fv(mat, false, mixMatrix(mixMatrix(perspective, vm ), rotate));
        // 执行绘制 绘制三个顶点
        gl.drawElements(gl.TRIANGLES, indexData.length, gl.UNSIGNED_BYTE, 0);

        requestAnimationFrame(draw)
    }

    draw()

    document.onkeydown = function (e){
        switch(e.keyCode){
            case 37: eyex += 0.01;break;
            case 38: eyex -= 0.01;break;
            case 39: eyey += 0.01;break;
            case 40: eyey -= 0.01;break;
        }
        draw();
    }


</script>
</html>
